<template>
  <div class="body">
    <!-- 头部 -->

    <!-- banner部分 版心布局 -->
    <div class="banner">
      <div class="swiper">
        <!--    轮播图-->
        <!-- <swiperCom></swiperCom> -->
        <!-- ceshi -->
        <div class="video">
          <video width="100%" loop="loop" autoplay="autoplay" muted="muted">
            <source
              src="../../assets/Video/HappyNewYeay.mp4"
              type="video/mp4"
            />
          </video>
        </div>
        <div class="title">
          <h1 class="logo">JENNY HOUSE</h1>
          <h1>万里挑一&nbsp; &nbsp;只为寻找您的家</h1>
        </div>
        <div class="search">
          <el-row type="flex" justify="left">
            <el-button
              type="text"
              v-for="(item, i) in houseType"
              :key="i"
              @click="changeType(i)"
              >{{ item }}</el-button
            >
          </el-row>
          <div class="inputBtn">
            <span class="span1" v-if="index === 1"></span>
            <span class="span2" v-if="index === 2"></span>
            <span class="span3" v-if="index === 3"></span>
            <span class="span4" v-if="index === 4"></span>
            <span class="span5" v-if="index === 5"></span>
            <span class="span6" v-if="index === 6"></span>
            <input type="text" v-model="value" placeholder="请输入关键字（楼盘名或地点）" />

            <button class="smallIcon" style="background-color:#678574" @click="searchFn">
              <img
                src="../../assets/svg/search.png"
                alt=""
                class="searchIcon"
              />
            </button>
            <button type="primary" class="smallIcon" style="background-color:#678574;margin-left:15px;width:72px;color:#fff;font-size:16px" @click="searchFn">
              地图找家
            </button>
          </div>
        </div>
      </div>
      <div class="w"></div>
    </div>
    <!-- 列表部分 -->
    <div class="list w">
      <table class="tabBar">
        <tbody>
          <tr class="tabItem">
            <td>热门楼盘</td>
            <td>优惠楼盘</td>
            <td>热门楼盘</td>
            <td>精选楼盘</td>
          </tr>
        </tbody>
      </table>
      <div class="clearfix">
        <div class="promote fl">
          <ul class="clearfix">
            <li class="first">
              <span></span>
              <img src="../../assets/images/show.jpg" alt="" />
              <div class="desc">
                <a href="#">
                  <dl>
                    <dt>时代山与墅</dt>
                    <dd>
                      <span>[ 黄埔 ]</span>
                      花莞高速西侧
                    </dd>
                  </dl>
                </a>
              </div>
            </li>
            <li>
              <span></span>
              <img src="../../assets/images/show2.jpg" alt="" />
              <div class="desc">
                <a href="#">
                  <dl>
                    <dt>雍云邸</dt>
                    <dd>
                      <span>[ 白云 ]</span>
                      滘心地铁B出口旁
                    </dd>
                  </dl>
                </a>
              </div>
            </li>
            <li>
              <span></span>
              <img src="../../assets/images/show3.jpg" alt="" />
              <div class="desc">
                <a href="#">
                  <dl>
                    <dt>中洲紫轩</dt>
                    <dd>
                      <span>[ 黄埔 ]</span>
                      中山大道东387号（地铁5号线鱼...
                    </dd>
                  </dl>
                </a>
              </div>
            </li>
            <li class="last">
              <span></span>
              <img src="../../assets/images/show4.jpeg" alt="" />
              <div class="desc">
                <a href="#">
                  <dl>
                    <dt>越秀·正荣天樾湾</dt>
                    <dd>
                      <span>[ 荔湾 ]</span>
                      海龙路116号
                    </dd>
                  </dl>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content w">
      <!-- 标题 -->
      <div class="title">
        <h1>购房资讯</h1>
      </div>
      <!-- 资讯 -->
      <div class="info">
        <div class="left">
          <div class="topInfo">
            <div class="leftDetail">
              <div class="news1">
                <img src="../../assets/images/news2.jpg" alt="" />
                <div class="black">
                  <p class="buyhouse">
                    交5万可抵10万，广州天河珠江新城东区新品认筹中！！！
                  </p>
                </div>
              </div>
              <div class="news2">
                <div class="one">
                  <img src="../../assets/images/news3.jpeg" alt="" />
                  <div class="black1 small1">
                    <p class="buyhouse">
                      临高长岛蓝湾主推小户型....
                    </p>
                  </div>
                </div>
                <div class="two">
                  <img src="../../assets/images/news3.jpeg" alt="" />
                  <div class="black1">
                    <p class="buyhouse">
                      商办类项目严禁“住宅类”....
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="buttonInfo">
            <h2>房市头条</h2>
            <div class="end">
              <div class="left">
                <img src="../../assets/images/news6.webp" alt="">
                <div>
                  <p>五大房企募资百亿，城市更新加速扩容</p>
                </div>
              </div>
              <div class="newsMore">
                <p class="title">广州工程建设项目将全面实行“一网通.…</p>
                <div class="content2">
                  <p>法拍房开启全面限购最高法新规2022年起施行</p>
                <p>长相房市场将迎快速发展期</p>
                <p>最新消息海南将新建2条公路地点</p>
                <p>房地产收并购哑火，供大于求的二手市场优势不再</p>
                <p>让安置社区吏加“安心”江东新区将建设兰香园安置社区配套路网项目</p>
                <p>房地产下半场走向存量不动产资管时代</p>
                <p>博警乐城真实世界数据研究取得了哪些进展？</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <el-card >
            <h2>楼盘资讯</h2>
            <div class="more">
              <ul>
                <li>
                  <div class="photo">
                  <img src="../../assets/images/news7.webp" alt="">
                  </div> 
                  <div class="desc">
                    <div class="money">三亚碧桂园海棠墅在售叠拼别墅总价590万元/套...</div>
                    <div class="time">2022-08-22</div>
                  </div> 
                </li>
                <li><div class="photo"><img src="../../assets/images/news9.webp" alt=""></div> <div class="desc">
                    <div class="money">君和君泰目前在告高层住宅、洋房、商铺均价…</div>
                    <div class="time">2022-08-22</div>
                  </div>  </li>
                <li><div class="photo"><img src="../../assets/images/news8.webp" alt=""></div> <div class="desc">
                    <div class="money">雅居乐金沙湾SOHO推出4套房源总价89-92万套..</div>
                    <div class="time">2022-08-22</div>
                  </div>  </li>
                <li><div class="photo"><img src="../../assets/images/news10.webp" alt=""></div> <div class="desc">
                    <div class="money">京艺源住宅推出8套养生度假住宅，总价61-115.…</div>
                    <div class="time">2022-08-22</div>
                  </div>  </li>
                <li><div class="photo"><img src="../../assets/images/news8.webp" alt=""></div> <div class="desc">
                    <div class="money">清水湾Aloha阿罗哈目前海景住宅在售均价495...</div>
                    <div class="time">2022-08-22</div>
                  </div>  </li>
                <li><div class="photo"><img src="../../assets/images/news7.webp" alt=""></div> <div class="desc">
                    <div class="money">碧桂园齐瓦领项目推出4套房源总价230万元/...</div>
                    <div class="time">2022-08-22</div>
                  </div>  </li>
              </ul>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footPart">
      <div class="footer w">
        <div class="top">
          <div class="introduce">
            <div>
              <img src="" alt="" />
            </div>
            <div>
              <a href="/about">公司介绍</a>
              <a href="/about">专家答疑</a>
              <a href="/about">隐私协议</a>
              <a href="/about">免责声明</a>
              <a href="/about">联系我们</a>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="detail">
            <div class="footer_info">
              <div>
                <span>广州市JENNY房地产代理有限公司</span>
                <span>邮箱：JENNY@six.com</span>
                <span>广东总部：广州市天河区珠吉路津安创意园219号</span>
                <!-- <div>北京道杰士投资咨询服务有限责任公司 | 网络经营许可证 京ICP备13049052号-2 | © Copyright© 2020 Sofang.com, All Rights Reserved |</div> -->
              </div>
              <div class="copyright">
                <span>Copyright ©2001-2022 JENNY HOUSE网版权所有</span>
                <span>粤ICP备11022641号</span>
                <span>粤公网安备 44049002000505号</span>
              </div>
            </div>
            <div class="footer_list">
              <div class="phone">
                <i class="el-icon-phone-outline"></i>
                服务热线：400-168-6666
              </div>
              <div class="timeWork">（周一至周日：8:30 - 18:30）</div>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwiperCom from "@/components/Swiper/swiperCom.vue";
// 获取列表数据,添加房产,房产数量，删除数据
import { getPages, addRealEstate, houseNum, delHouse, getHouseById, editHouse } from '@/api/realEstate'

export default {
  components: {
    SwiperCom,
  },
  data() {
    return {
      // 换页对象
      pages: {
        // 每页显示条目
        _limit: 3,
        _start: 0
      },
      // 数据数组
      tableData: [],
      value:'',
      state: "",
      List: ["找二手房", "找新房", "找租房", "找小区", "搜问答"],
      houseType: ["二手房", "新房", "租房", "写字楼", "小区", "发布房源"],
      curIndex: 0,
      restaurants: [],
      activeIndex: "1",
      activeIndex2: "1",
      index: 1,
    };
  },
  methods: {
    changeColor(index) {
      this.curIndex = index;
    },
    changeType(i) {
      this.index = i + 1;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect(item) {
      console.log(item);
    },
    // loadAll() {
    //   return [
    //     {
    //       value: "新旺角茶餐厅",
    //       address: "上海市普陀区真北路988号创邑金沙谷6号楼113",
    //     },
    //     { value: "泷千家(天山西路店)", address: "天山西路438号" },
    //     {
    //       value: "Merci Paul cafe",
    //       address: "上海市普陀区光复西路丹巴路28弄6号楼819",
    //     },
    //     {
    //       value: "猫山王（西郊百联店）",
    //       address: "上海市长宁区仙霞西路88号第一层G05-F01-1-306",
    //     },
    //     {
    //       value: "樱花食堂（凌空店）",
    //       address: "上海市长宁区金钟路968号15楼15-105室",
    //     },
    //     {
    //       value: "南拳妈妈龙虾盖浇饭",
    //       address: "普陀区金沙江路1699号鑫乐惠美食广场A13",
    //     },
    //   ];
    // },
    async searchFn(){
      // const { data } = await getPages({
      //   // 展开对象,因为筛选的时候传参要传多几个
      //   _limit: this.pages._limit,
      //   // 用短路运算，每输入的时候值为null，输入的时候用输入的值
      //   title_contains: this.value || null,
      //   // 经纪，短路运算，
      //   agent: this.condition2 || null,
      //   category: this.condition1 || null
      // })
      // this.tableData = data
      // this.homenum()
    },
    // 获取房产数量的函数
    async homenum() {
      // const num = await houseNum({ title_contains: this.$refs.pageTs.value || null,
      //   agent: this.condition2 || null,
      //   category: this.condition1 || null })
      // this.totalhouse = num.data
    }
  },
};
</script>

<style lang="scss" scoped>
.menu {
  // height: 100px;
  width: 1226px;
  display: flex;
  justify-content: space-between;
  position: fixed;
  .el-menu-item {
    width: 100px;
    text-align: center;
  }
  .loginBtn {
    display: flex;
    justify-content: flex-end;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .el-link {
    color: #fff;
    margin: 0 10px;
  }
  .iconAvater {
    margin-top: 3px;
  }
}

.banner {
  position: relative;
  // margin-bottom: 10px;
  .video {
    height: 640px;
  }
  .swiper {
    height: 100%;
    overflow: hidden;
    .title {
      font-size: 25px;
      width: 600px;
      height: 100px;
      // background-color: #000;
      color: #fff;
      position: absolute;
      top: 31%;
      left: 34%;
      margin-top: -50px;
      margin-left: -50px;
      z-index: 999;
      .logo {
        font-size: 28px;
      }
    }
    .search {
      width: 700px;
      height: 125px;
      background-color: rgba(0, 0, 0, 0.1);
      position: absolute;
      border-radius: 10px;
      top: 58%;
      left: 34%;
      margin-top: -50px;
      margin-left: -50px;
      z-index: 999;
      .el-button {
        color: #fff;
        font-size: 18px;
        margin: 10px 10px 10px 20px;
      }
      .inputBtn {
        margin-left: 20px;
        margin-top: 12px;
        position: relative;
        .span1 {
          position: absolute;
          left: 15px;
          bottom: 49px;
          border-width: 10px;
          border-style: solid dashed dashed;
          border-color: transparent transparent #fff;
          font-size: 0;
          line-height: 0;
        }
        .span2 {
          position: absolute;
          left: 91px;
          bottom: 49px;
          border-width: 10px;
          border-style: solid dashed dashed;
          border-color: transparent transparent #fff;
          font-size: 0;
          line-height: 0;
        }
        .span3 {
          position: absolute;
          left: 158px;
          bottom: 49px;
          border-width: 10px;
          border-style: solid dashed dashed;
          border-color: transparent transparent #fff;
          font-size: 0;
          line-height: 0;
        }
        .span4 {
          position: absolute;
          left: 231px;
          bottom: 49px;
          border-width: 10px;
          border-style: solid dashed dashed;
          border-color: transparent transparent #fff;
          font-size: 0;
          line-height: 0;
        }
        .span5 {
          position: absolute;
          left: 306px;
          bottom: 49px;
          border-width: 10px;
          border-style: solid dashed dashed;
          border-color: transparent transparent #fff;
          font-size: 0;
          line-height: 0;
        }
        .span6 {
          position: absolute;
          left: 390px;
          bottom: 49px;
          border-width: 10px;
          border-style: solid dashed dashed;
          border-color: transparent transparent #fff;
          font-size: 0;
          line-height: 0;
        }

        input {
          width: 500px;
          height: 50px;
        }
        .smallIcon {
          height: 50px;
          width: 50px;
          background-color: #0097ff;
          border-radius: 0 5px 5px 0;
          vertical-align: top;
          .searchIcon {
            width: 30px;
            vertical-align: top;
            overflow: hidden;
          }
        }
      }
    }
  }
  button {
    border: none;
  }
}

.list {
  .tabBar {
    margin-top: 35px;
    height: 55px;
    width: 100%;
    td {
      text-align: center;
      background-color: #f5f7fa;
      margin-right: 10px;
    }
  }
  .clearfix {
    zoom: 1;
    .promote {
      position: relative;
      width: 100%;
      height: 207px;
      margin-top: 15px;
      li {
        float: left;
        position: relative;
        width: 276px;
        height: 207px;
        margin-right: 16px;
        margin-left: 16px;
        // height: 207px;
        background-color: pink;
      }
      .first {
        margin-left: 16px;
      }
      .last {
        margin-right: -32px;
        margin-left: 16px;
      }
      .desc {
        transition: none;
        position: absolute;
        top: 0px;
        // bottom: -172px;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("../../assets/images/newbg.png") repeat-x left bottom;
        color: #fff;
        transition: all 0.5s;
        a {
          color: #fff;
          dt {
            margin-left: 5px;
            margin-top: 160px;
          }
          dd {
            margin-left: 5px;
            font-size: 12px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}

.content {
  height: 760px;
  // background-color: #0097ff;
  .title {
    margin-top: 50px;
    font-size: 22px;
    text-align: center;
    // margin-bottom: 20px;
    height: 80px;
  }
  .info {
    display: flex;
    width: 100%;
    height: 680px;
    .left {
      flex: 2;
      // background-color: brown;
      .topInfo {
        // width: 775px;
        height: 335px;
        .leftDetail {
          display: flex;
          .buyhouse {
                margin-left: 20px;
              }
          .news1 {
            position: relative;
            width: 490px;
            img {
              width: 490px;
            }
            .black {
              position: absolute;
              width: 490px;
              height: 40px;
              background-color: rgba(0, 0, 0, 0.6);
              bottom: 1%;
              color: #fff;
              line-height: 40px;
            }
          }
          .news2 {
            position: relative;
            margin-left: 25px;
            img {
              height: 160px;
            }
            .black1{
              position: absolute;
              width: 217px;
              height: 30px;
              background-color: rgba(0, 0, 0, 0.6);
              bottom: 2%;
              color: #fff;
              line-height: 30px;
            }
            .small1{
              top: 39.5%;
            }
          }
        }
        .rightDetail {
        }
      }
      .buttonInfo {
        height: 365px;
        h2{
          height: 45px;
          line-height: 40px;
        }
        img{
          height: 250px;
        }
        p{
          margin-top: 10px;
          font-size: 18px;
        }
        .end{
        display: flex;

          .left{
          // position: absolute;
        }
        .newsMore{
          // position: absolute;
          .title{
            font-size: 24px;
            font-weight: 700;
          }
          .content2{
            margin-top: -30px;
            margin-left: 20px;
            p{
              margin-bottom: 7px;
              font-size: 16px;
            }
          }
        }
        }
      }
    }
    .right {
      flex: 1;
      background-color: bisque;
      h2{
        margin-top: -10px;
      }
      .more{
          ul{
            height: 650px;
            margin-top: 8px;
            li{
              display: flex;
              .photo{
                width: 130px;
                img{
                  height: 100px;
                  width: 134px;
                  margin-bottom: 8px;
                }
              }
              .desc{
                height: 112px;
              margin-left: 15px;
                .money{
                  font-size: 18px;
                }
                .time{
                  margin-top: 30px;
                  font-size: 15px;
                  color: #aaa;
                }
              }
            }
          }
      }
    }
  }
}

.footer {
  background-color: #292c34;
  // padding-top: 50px;
  .top {
    height: 230px;
    margin-left: 40px;
    margin-right: 40px;
    .introduce {
      height: 100px;
      line-height: 35px;
      // background-color: #0097ff;
      font-size: 18px;
      a {
        color: #fff;
        margin-left: 40px;
      }
    }
    .detail {
      display: flex;
      justify-content: space-between;
      text-align: left;
      color: #888b90;
      margin-top: 20px;
      .footer_info {
        span {
          margin-right: 30px;
        }
        .copyright {
          margin-top: 10px;
        }
      }
      .footer_list {
        .phone {
          font-size: 18px;
          color: #fff;
        }
        .timeWork {
          font-size: 13px;
          margin-left: 35px;
        }
      }
    }
  }
}

.avater {
  width: 20px;
  height: 20px;
}
// .search{
//   margin-top: 4em;
//   margin-left: 10em;
//   .el-button{
//     // color: rgb(142, 138, 138);
//     color: #fff;
//     font-weight: 600;
//     font-size: 22px;
//     margin-right: 2em;
//     // width: 120px;
//     // height: 50px;
//     // background-color: rgba(255, 255, 255, 0.329);
//   }
//   .active{
//     color:rgb(179, 106, 106) ;
//     z-index: 999;
//   }
//   .inputBtn{
//     width: 45em;
//   }
// }

/* 清内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans",
    "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

/* 设置版心 */
.w {
  width: 1226px;
  /* 版面居中 */
  margin: 0 auto;
}

/* 头部 */
.header {
  position: relative;
  height: 60px;
  background-color: #333;

  // margin-bottom: 10px;
}

/* banner部分 */
.banner {
  // height: 460px;
  // width: 1760px;
  margin: 0 auto;
  // background-color: #FFE4E1;
  // margin-bottom: 10px;
}

.list {
  margin-bottom: 10px;
}
.footPart {
  background-color: #292c34;
}
.footer {
  margin-top: 80px;
  height: 230px;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}
li {
  list-style: none;
}
input {
  outline: none;
}
::v-deep .el-divider {
  background-color: #595967;
}
</style>
